<template>
    <div class="management-equipmentType">
        <div class="exception-top">
            <a-form-model layout="inline" :model="page" :colon="false">
                <a-form-model-item label="设备类型">
                    <a-input v-model="page.name" placeholder="请输入设备类型" @keyup.enter="selectFn"/>
                </a-form-model-item>
                <a-form-model-item>
                    <a-button type="primary" @click="selectFn">搜索</a-button>
                </a-form-model-item>
            </a-form-model>
            <a-button type="primary" @click="()=>{title = '添加设备类型';addPop = true;}">添加</a-button>
        </div>
        <div class="exception-content">
            <a-table :data-source="tableData" :pagination="false" :rowKey="record=> record.id">
                <a-table-column title="序号" align="center" :ellipsis="true" :customRender="(text, record, index) =>(page.current - 1) * page.size + index + 1"/>
                <a-table-column title="设备类型名字" data-index="name" align="center" :ellipsis="true" />
                <a-table-column title="创建时间" data-index="createTime" align="center" :ellipsis="true" />
                <a-table-column title="备注" data-index="note" align="center" :ellipsis="true" />
                <a-table-column title="是否启用" data-index="enable" align="center">
                    <template slot-scope="enable">
                        <a-switch default-checked :checked="enable" />
                    </template>
                </a-table-column>
                <a-table-column title="操作" align="center" width="200px">
                    <template slot-scope="text,record">
                        <div class="handle">
                            <a-button type="primary" @click="editFn(record)">修改</a-button>
                            <a-button type="danger" @click="delFn(record.id)">删除</a-button>
                        </div>
                    </template>
                </a-table-column>
            </a-table>
        </div>
        <div class="exception-bottom clearfix">
            <div class="page-box">
                <a-pagination :show-total="total => `共 ${total} 条记录`" v-model="page.current" :total="total" :defaultPageSize="page.size" hideOnSinglePage :item-render="itemRender" @change="pagechangeFn" />
            </div>
        </div>
        <!-- 添加弹框 -->
        <a-modal v-model="addPop" width="50%" :title="title" centered @cancel="()=>form = {createTime :''}" :maskClosable="false" destroyOnClose>
            <a-form-model ref="formRules" :rules="formRules" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :colon="false">
                <a-form-model-item label="设备类型名称">
                    <a-input v-model="form.name" />
                </a-form-model-item>
                <a-form-model-item label="创建时间">
                    <a-date-picker :default-value="form.createTime==''?null:moment(form.createTime, 'YYYY-MM-DD hh:mm:ss')" show-time placeholder="创建时间" @change="onChange" />
                </a-form-model-item>
                <a-form-model-item label="是否启用">
                    <a-switch v-model="form.enable" />
                </a-form-model-item>
                <a-form-model-item label="备注">
                    <a-input v-model="form.note" type="textarea" />
                </a-form-model-item>
            </a-form-model>

            <template slot="footer">
                <a-button type="primary" @click="SubmitFn">确定</a-button>
            </template>
        </a-modal>
    </div>
</template>

<script>
import moment from "moment";
import "moment/locale/zh-cn";
export default {
    name: "outliers",
    data() {
        return {
            moment,
            labelCol: { span: 4 },
            wrapperCol: { span: 16 },
            treeData: [],
            title: "",
            addPop: false,
            page: {
                current: 1,
                size: 10,
                name: "",
            },
            total: 0,
            tableData: [],
            form: {
                // 弹窗添加表单数据
                name: "",
                createTime: "",
                note: "",
                enable: true,
            },
            formRules: {
                name: [
                    {
                        required: true,
                        message: "设备类型名字",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    methods: {
        selectFn() {
            // 搜索按钮
            this.page.current = 1;
            this.getdata();
        },
        editFn(data) {
            this.title = "修改设备类型";
            this.form = JSON.parse(JSON.stringify(data));
            this.addPop = true;
        },
        delFn(id) {
            let _that = this;
            this.$confirm({
                title: "是否确认删除",
                onOk() {
                    _that.$api.DelequipmentTyperemove(id).then((res) => {
                        if (res.data.data == true) {
                            _that.$message.info("数据删除成功!");
                            _that.getdata();
                        } else {
                            _that.$message.info(res.data.errorMessage);
                        }
                    });
                },
                onCancel() {
                    return;
                },
                class: "delk",
            });
        },
        SubmitFn() {
            // 弹窗提交按钮
            this.$refs.formRules.validate((valid) => {
                if (valid) {
                    if (this.title == "添加设备类型") {
                        this.$api
                            .PostequipmentTypesave(this.form)
                            .then((res) => {
                                if (res.data.code == 0) {
                                    this.addPop = false;
                                    this.$message.info("添加成功!");
                                    this.form = {
                                        createTime: "",
                                    };
                                    this.getdata();
                                }
                            });
                    } else {
                        if (typeof this.form.createTime == "string") {
                            this.form.createTime = moment(
                                Date.now(),
                                this.form.createTime
                            )._i;
                        }
                        this.$api
                            .PutequipmentTypeedit(this.form)
                            .then((res) => {
                                if (res.data.code == 0) {
                                    this.addPop = false;
                                    this.form = {
                                        createTime: "",
                                    };
                                    this.$message.info("修改成功!");
                                    this.getdata();
                                }
                            });
                    }
                }
            });
        },
        // 分页方法
        itemRender(current, type, originalElement) {
            if (type === "prev") {
                return <a>上一页</a>;
            } else if (type === "next") {
                return <a>下一页</a>;
            }
            return originalElement;
        },
        pagechangeFn(page) {
            this.page.current = page;
            this.getdata();
        },
        // 日期方法
        onChange(date, dateString) {
            this.form.createTime = moment(Date.now(), dateString)._i;
        },
        // 数据获取方法
        getdata() {
            this.$api.PostequipmentTypefindByPage(this.page).then((res) => {
                //   console.log(res)
                if (res.data.code == 0) {
                    this.tableData = res.data.data;
                    this.tableData.forEach((v) => {
                        v.createTime = moment(parseInt(v.createTime)).format(
                            "YYYY/MM/DD hh:mm:ss"
                        );
                    });
                    this.total = res.data.total;
                }
            });
        },
    },
    mounted() {
        this.getdata();
    },
};
</script>

<style lang="scss" scoped>
.management-equipmentType {
    width: 100%;
    height: 100%;
    padding: 1%;
    box-sizing: border-box;
    .exception-top {
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .exception-content {
        width: 100%;
        height: calc(94% - 60px);
        .handle {
            display: flex;
            justify-content: space-around;
        }
    }
    .exception-bottom {
        width: 100%;
        .page-box {
            float: right;
        }
    }
}
</style>